<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单提示信息</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<!---
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。
使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

具体样式代码请查看bootstrap.css文件第1922行～第1927行：

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。
一般让提示信息显示在控件的后面，也就是同一水平显示。
如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}
如果你不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。
-->
<body>
<h3>示例1</h3>
<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <!--help-block-->
    <span class="help-block">你输入的信息是正确的</span>
    <!--右侧图标-->
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息</span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>    
<br>
<br>
<br>
<h3>示例2</h3>
<form role="form">
  <!--class="form-group" 底部边距-->
  <div class="form-group">一行排列
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <!--class="row"一行当中，使用class="col-xs-6" 以及class="help-block“-->
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
       <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>
  </div> 
</form> 
</body>
</html>